<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>账号管理</title>
    <link rel="stylesheet" href="../../lib/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../font/iconfont.css">
    <script src="../../lib/jquery/jquery-3.6.0.min.js"></script>
    <script src="../../lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <script src="../../javaScript/quanXianGuanLi/date.js"></script>
    <script src="../../javaScript/quanXianGuanLi/renYuanShuJu.js"></script>
    <script src="../../javaScript/quanXianGuanLi/accountDetails.js"></script>

    <style>
        body {
            background-color: #F2F2F2;
        }
        
        a {
            color: black;
        }
        
        a:hover {
            color: #49A2E8;
            text-decoration: unset;
        }
        
        .container {
            width: 1670px;
            line-height: 80px;
            background-color: white;
            border-radius: 2px;
            margin-top: 10px;
        }
        
        .nav_header {
            height: 80px;
        }
        
        .content_right {
            text-align: right;
        }
        
        .drop_down {
            width: 255px;
            height: 40px;
            outline: none
        }
        
        .sousuo,
        .chongzhi {
            width: 85px;
            height: 40px;
            line-height: 36px;
            padding: 0;
            border: 0;
            border-radius: 2px;
        }
        
        .sousuo {
            /* 搜索按钮 */
            background-color: #49A2E8;
            color: white;
        }
        
        .chongzhi {
            /* 重置按钮 */
            color: #666666;
        }
        
        .shanchu,
        .xinzeng {
            width: 80px;
            height: 35px;
            line-height: 33px;
            padding: 0;
            border: 0;
            border-radius: 2px;
        }
        
        .shanchu {
            /* 删除按钮 */
            color: #666666;
            border: rgb(204, 204, 204) 1px solid;
            background-color: white;
        }
        
        .xinzeng {
            /* 新增按钮 */
            color: #49A2E8;
            border: #49A2E8 1px solid;
        }
        
        .table_row span {
            display: inline-block;
            margin-right: 10px;
        }
        
        .table_row span:hover {
            color: #49A2E8;
            cursor: pointer;
        }
        
        .table_page {
            height: 74px;
            line-height: 74px;
        }
        
        .table_page>nav,
        .page_num {
            height: 74px;
            line-height: 74px;
        }
        
        .page_num {
            padding: 20px;
        }
        
        .page_num>ul {
            height: 34px;
            border-radius: 2px;
            padding: 0;
            overflow: hidden;
            transition: all 0.3s linear;
        }
        
        .page_num>ul:hover {
            height: 136px;
        }
        
        .page_num>ul>li {
            list-style: none;
            padding: 0 10px;
            height: 34px;
            line-height: 34px;
            background-color: #F2F2F2;
        }
        
        .modal-body {
            overflow: auto;
            height: 400px;
            padding: 40px 50px;
        }
        
        .set_permission {
            border: 0;
            background-color: unset
        }
        
        .modal-body::-webkit-scrollbar {
            display: none;
        }
        
        .modal-dialog-quanxian {
            width: 900px;
            height: 550px;
        }
        
        .modal-dialog-quanxian {
            width: 900px;
        }
        
        .table_down {
            height: 60px;
            overflow: hidden;
        }
        
        .checkbox_span {
            display: inline-block;
            margin-left: 10px;
        }
        
        .modal-body_content {
            width: 650px;
            height: 300px;
            margin: 50px auto;
            font-size: 20px;
        }
        /* 设置角色的模态框样式 */
        
        .modal-body_content>div:first-of-type {
            height: 40px;
            line-height: 40px;
        }
        
        .modal-body_content>div:first-of-type>div:last-of-type>select {
            width: 80%;
            height: 40px;
            line-height: 40px;
        }
        
        .xinghao {
            color: red;
        }
        
        .row_right {
            text-align: right;
        }
        
        .modal-body_content>div {
            margin-bottom: 50px;
        }
        
        .modal-body_content label {
            font-size: 16px;
            font-weight: 500;
        }
        
        #myModalpassword input {
            width: 80%;
            height: 40px;
            line-height: 40px;
        }
        
        .page_nav {
            text-align: right;
        }
    </style>
</head>

<body>
    <div id="motaikuang">
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="setRole">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="setRole">设置权限</h4>
                    </div>
                    <div class="modal-body">
                        <div class="modal-body_content">
                            <div class=" row">
                                <div class="col-md-3 col-xs-3 row_right">
                                    <span class="xinghao">*</span><span>所属组织</span>
                                </div>
                                <div class="col-md-9 col-xs-9">
                                    <select name="" id="" class="org_option">
                                        <option value="">请选择所属组织</option>
                                        <option value="运营部">运营部</option>
                                        <option value="市场部">市场部</option>
                                        <option value="财务部">财务部</option>
                                        <option value="技术部">技术部</option>
                                        <option value="产品部">产品部</option>
                                        <option value="设计部">设计部</option>
                                    </select>
                                </div>
                            </div>
                            <div class=" row">
                                <div class="col-md-3 col-xs-3 row_right">
                                    <span class="xinghao">*</span><span>选择角色</span>
                                </div>
                                <div class="col-md-9 col-xs-9">
                                    <div class="row role_input">
                                        <div class="col-md-3 col-xs-3"> <label><input type="checkbox" name="role" id="" value="运营管理员">运营管理员</label></div>
                                        <div class="col-md-3 col-xs-3"> <label><input type="checkbox" name="role" id="" value="人事管理员">人事管理员</label></div>
                                        <div class="col-md-3 col-xs-3"> <label><input type="checkbox" name="role" id="" value="市场管理员">市场管理员</label></div>
                                        <div class="col-md-3 col-xs-3"> <label><input type="checkbox" name="role" id="" value="产品管理员">产品管理员</label></div>
                                        <div class="col-md-3 col-xs-3"> <label><input type="checkbox" name="role" id="" value="技术管理员">技术管理员</label></div>
                                        <div class="col-md-3 col-xs-3"> <label><input type="checkbox" name="role" id="" value="客服管理员">客服管理员</label></div>
                                        <div class="col-md-3 col-xs-3"> <label><input type="checkbox" name="role" id="" value="UI管理员">UI管理员</label></div>
                                        <div class="col-md-3 col-xs-3"> <label><input type="checkbox" name="role" id="" value="测试管理员">测试管理员</label></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary sure">确定</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="myModalpassword" tabindex="-1" role="dialog" aria-labelledby="setRole">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="setRole">设置新密码</h4>
                    </div>
                    <div class="modal-body">
                        <div class="modal-body_content">
                            <div class=" row">
                                <div class="col-md-3 col-xs-3 row_right">
                                    <span class="xinghao">*</span><span>新密码</span>
                                </div>
                                <div class="col-md-9 col-xs-9">
                                    <input type="password" placeholder="6-16位数字、字母组合">

                                </div>
                            </div>
                            <div class=" row">
                                <div class="col-md-3 col-xs-3 row_right">
                                    <span class="xinghao">*</span><span>重复密码</span>
                                </div>
                                <div class="col-md-9 col-xs-9">
                                    <input type="password" placeholder="再次输入密码">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary password_sure">确定</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container nav_header">
        <div class="row">
            <div class="col-md-10 col-xs-10">
                <div class="row">
                    <div class="col-md-3 col-xs-3">
                        所属组织
                        <select class="drop_down" id="drop_down_one">
                    <option value="">请选择组织</option>
                    <option value="运营部">运营部</option>
                    <option value="市场部">市场部</option>
                    <option value="产品部">产品部</option>
                    <option value="技术部">技术部</option>
                    <option value="设计部">设计部</option>
                    <option value="测试部">测试部</option>
                    <option value="财务部">财务部</option>
                    <option value="人事部">人事部</option>
                    <option value="客服部">客服部</option>
                        </select>
                    </div>
                    <div class="col-md-3 col-xs-3">
                        当前状态
                        <select class="drop_down" id="drop_down_two">
                    <option value="">请选择组织</option>
                    <option value="启用">启用</option>
                    <option value="禁用">禁用</option>
                        </select>
                    </div>
                    <div class="col-md-3 col-xs-3">
                        角色名称
                        <input type="text" placeholder="角色名称" class="drop_down" value="" id="drop_down_three">
                    </div>
                    <div class="col-md-3 col-xs-3">
                        创建人
                        <input type="text" placeholder="创建人" class="drop_down" value="" id="drop_down_four">
                    </div>
                </div>
            </div>
            <div class="col-md-2 col-xs-2 content_right">
                <button class="sousuo"><span class="iconfont icon-sousuo"></span>搜索</button>
                <button class="chongzhi"><span class="iconfont icon-zhongzhizhongzhi"></span>重置</button>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-md-10 col-xs-10">
                <div class="row">
                    <div class="col-md-1 col-xs-1">
                        <span class="iconfont icon-shujukuliebiao"></span>数据列表
                    </div>
                    <div class="col-md-1 col-xs-1">
                        <button class="shanchu"><span class="iconfont icon-shanchu"></span>删除</button>
                    </div>
                </div>
            </div>
            <div class="col-md-2 content_right"> <button class="xinzeng"><span>+ </span>新增</button></div>
        </div>
        <table class="table table-striped">
            <thead>
                <tr class="table_row">
                    <th>
                        <input type="checkbox" class="quanxuan" value="">
                    </th>
                    <th>序号</th>
                    <th>用户名</th>
                    <th>姓名</th>
                    <th>角色</th>
                    <th>所属组织</th>
                    <th>状态</th>
                    <th>操作</th>
                    <th>查看详情</th>
                </tr>
            </thead>
            <tbody class="table_row table_content">

            </tbody>
        </table>
        <div class="row table_page">
            <div class="col-md-8 col-xs-8"> <input type="checkbox" class="quanxuan" value="">&nbsp&nbsp全选</div>
            <nav aria-label="Page navigation" class="col-md-3 col-xs-3 page_nav">
                <ul class="pagination">
                    <li>
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li class="active"><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
            <div class="col-md-1 col-xs-1 page_num">
                <ul>
                    <li data-num="10" class="page_data">10条/页<span class="iconfont icon-arrow-down"></span></li>
                    <li data-num="15" class="page_data">15条/页</li>
                    <li data-num="20" class="page_data">20条/页</li>
                    <li data-num="25" class="page_data">25条/页</li>
                </ul>
            </div>
        </div>
    </div>
    <script src="../../javaScript/quanXianGuanLi/ZhangHaoGuanLiFenYe.js"></script>
    <script>
        let organization //获取选择的组织
        $('#drop_down_one').on('click', $('option'), function() {
            organization = $(this)
        })

        let atState //获取选择的状态
        $('#drop_down_two').on('click', $('option'), function() {
            atState = $(this)
        })

        let characterName //获取输入的角色名称
        $('#drop_down_three').on('focusout', $('option'), function() {
            characterName = $(this)
        })

        let creator //获取输入的创建人
        $('#drop_down_four').on('focusout', $('option'), function() {
            creator = $(this)
        })

        $('.sousuo').click(function() { //查找
            pagingData = accountData
            let sousuoData
            if (organization != undefined) {
                sousuoData = pagingData.filter(item => item.org == organization.val())
                pagingData = sousuoData
            }
            if (atState != undefined) {
                sousuoData = pagingData.filter(item => item.state == atState.val())
                pagingData = sousuoData
            }
            if (characterName != undefined) {
                sousuoData = pagingData.filter(item => item.userName == characterName.val())
                pagingData = sousuoData
            }
            if (creator != undefined) {
                sousuoData = pagingData.filter(item => item.name == creator.val())
                pagingData = sousuoData
            }
            paging(1, pagingData, disPage)
        })

        $('.chongzhi').click(function() { //重置查找
            pagingData = accountData
            if (organization != undefined) {
                organization.html(`
                    <option value="">请选择组织</option>
                    <option value="运营部">运营部</option>
                    <option value="市场部">市场部</option>
                    <option value="产品部">产品部</option>
                    <option value="技术部">技术部</option>
                    <option value="设计部">设计部</option>
                    <option value="测试部">测试部</option>
                    <option value="财务部">财务部</option>
                    <option value="人事部">人事部</option>
                    <option value="客服部">客服部</option>
                `)
                organization = undefined
            }
            if (atState != undefined) {
                atState.html(`  
                    <option value="">请选择组织</option>
                    <option value="启用">启用</option>
                    <option value="禁用">禁用</option>`)
                atState = undefined
            }
            if (characterName != undefined) {
                characterName.val('')
                characterName = undefined
            }
            if (creator != undefined) {
                creator.val('')
                creator = undefined
            }
            paging(1, pagingData, disPage)
        })
    </script>
</body>

</html>